<template>
    <div class="rain-map">
        <div :id="data_id"></div>
        <ul>
            <li v-for="x in level">{{x}}</li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import {loadModules} from "esri-loader";

    export default {
        props:['data_id'],
        data () {
            return {
				map: {},
				esri: {},
                level:['小雨','中雨','大雨','暴雨','大暴雨','特大暴雨'],
                view:{},
				ranking: [],
				circleGraphicsLayer: {},
				geometryList: [],
				graphic: {},
            }
        },
		created() {
			this.upTimer()
		},
        mounted() {
			
            loadModules([
                "esri/Map",
                "esri/views/MapView",
                "esri/layers/MapImageLayer",
				"esri/Basemap",
				"esri/layers/GraphicsLayer",
				"esri/Graphic",
				"esri/geometry/Circle",
				"esri/symbols/FillSymbol",
				"esri/tasks/QueryTask",
				"esri/tasks/support/Query",
                "dojo/domReady!"
            ], {url: 'api/init.js'}).then(([Map, MapView, MapImageLayer,Basemap,GraphicsLayer,Graphic,CircleGeometry, FillSymbol, QueryTask, Query])=> {
				
				this.esri = {
					Graphic: Graphic,
				};
				var basemap = new Basemap({
				    baseLayers: [
						new MapImageLayer({
						    url: "https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hp_jiezhen/MapServer",
						}),
				    ],
				});
				this.map = new Map({
				    basemap: basemap,
				});

                this.view = new MapView({
                    container: this.data_id,
                    map: this.map
                });
				// map.layers.add(new MapImageLayer("https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hp_jiezhen/MapServer", null));
                this.view.ui.remove('zoom');
                this.view.ui.remove('attribution');
				this.circleGraphicsLayer = new GraphicsLayer({});
				this.map.add(this.circleGraphicsLayer);

				var citiesLayerUrl = "https://gzcimportal.gzcc.gov.cn/server/rest/services/hpMap/hp_jiezhen/MapServer/0/query"; // Represents the REST endpoint for a layer of cities.
				var queryTask = new QueryTask({
					url: citiesLayerUrl
				});
				var query = new Query();
				query.returnGeometry = true;
				query.outFields = ["*"];
				query.where = "1=1";
				query.spatialRe = "esriSpatialRelIntersects";
				// debugger

				var that = this
				that.geometryList = []
				
				queryTask.execute(query).then(function(results){
					that.geometryList = results.features
					// 降雨排行榜
					that.$axios.ranking().then(v=>{
						if (v.resultCode === 200) {
							that.ranking = v.data
							that.setMapColor(that.geometryList, that.ranking)
							// console.log('ranking', v.data)
							// this.ranking=v.data
						}
					});
					
					// for (let i = 0; i < this.geometryList.length; i++) {
					// 	for (let j = 0; j < that.ranking.length; j++) {
					// 		if (this.geometryList[i].attributes.code == that.ranking[j].ad_cd && that.ranking[j].rainfall > 0) {
					// 			var graphic = new Graphic({
					// 			    geometry: this.geometryList[i].geometry,
					// 			    symbol: {
					// 					type: "simple-fill",
					// 					color: that.getColor(that.ranking[j].rainfall),
					// 				}
					// 			});

					// 			this.circleGraphicsLayer.add(graphic);

					// 		}
					// 	}
					// }
				});

                this.view.on('mouse-wheel',function(evt){
                    evt.stopPropagation ();
                });

                this.view.on('drag',function(evt){
                    evt.stopPropagation ();
                });

            });
        },
		methods: {
			upTimer() {
				setInterval(() => {
					// 降雨排行榜
					this.$axios.ranking().then(v=>{
						if (v.resultCode === 200) {
							this.setMapColor(this.geometryList, v.data)
						}
					});
				}, 60000);
			},
			setMapColor(geometryList, ranking) {
				
				let that = this
				that.circleGraphicsLayer.remove(that.graphic);
				for (let i = 0; i < geometryList.length; i++) {
					for (let j = 0; j < ranking.length; j++) {
						if (geometryList[i].attributes.code == ranking[j].ad_cd && ranking[j].rainfall > 0) {
							that.graphic = new that.esri.Graphic({
							    geometry: geometryList[i].geometry,
							    symbol: {
									type: "simple-fill",
									color: that.getColor(ranking[j].rainfall),
								}
							});
				
							that.circleGraphicsLayer.add(that.graphic);
							
						}
					}
				}
			},
			getAPIUp() {
				// 降雨排行榜
				this.$axios.ranking().then(v=>{
					if (v.resultCode === 200) {
						this.ranking = v.data
						// console.log('ranking', v.data)
						// this.ranking=v.data
					}
				});
			},
			// 正常  0
			// 小雨 0.1-4.9
			// 中雨 5.0-14.9
			// 大雨 15.0-29.9
			// 暴雨 30.0-69.9
			// 大暴雨 70.0-139.9
			// 特大暴雨 140.0以上 red
			getColor(num) {
				// console.log('雨量', num)
				let vale = ''

				if (num > 0 && num <= 4.9 ) {
					vale = '#a3dcb1'
				} else if (num >= 5 && num <= 14.9) {
					vale = '#00c201'
				} else if (num >= 15 && num <= 29.9) {
					vale = '#0096f4'
				} else if (num >= 30 && num <= 64.9) {
					vale = '#fad5c4'
				} else if (num >= 70 && num <= 139.9) {
					vale = '#fd00fe'
				} else if (num >= 140) {
					vale = '#b80001'
				} 
				return vale
			}
		}


    }
</script>
<style lang="less" rel="stylesheet/less">
    .rain-map{
        position: relative;
        ul{
            position: absolute;
            right: 10px*@ratio;
            bottom: 0;
            li{
                display: flex;
                justify-content: flex-end;
                align-items: center;
                font-size: 10px*@ratio;
                height: 18px*@ratio;
                color: rgba(255, 255, 255, .7);
                &:after{
                    width: 6px*@ratio;
                    height:6px*@ratio;
                    margin-left: 5px*@ratio;
                    background: #a3dcb1;
                    content:'';
                    display: block;
                }
                &:nth-child(2):after{
                    background: #00c201;
                }
                &:nth-child(3):after{
                    background: #0096f4;
                }
                &:nth-child(4):after{
                    background: #fad5c4;
                }
                &:nth-child(5):after{
                    background: #fd00fe;
                }
                &:nth-child(6):after{
                    background: #b80001;
                }
            }
        }
        &>div{
            height: 100%;
        }
    }
</style>
